<template>
  <div>
    <van-nav-bar placeholder fixed>
      <template #left>
        <img src="/tu.png" style="width: 46px;" />
      </template>
      <template #right>
        <van-icon name="search" size="18" color="#343434" @click="goCateGory" />
      </template>
    </van-nav-bar>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img style=" max-width:100%; height: 150px; width: 375px;"
          src="/src=http___img.zcool.cn_community_018aec5c763a45a801203d229edcad.jpg@2o.jpg&refer=http___img.zcool.webp"
          alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img style=" max-width:100%; height: 150px; width: 375px;"
          src="/src=http___lmg.jj20.com_up_allimg_1113_031320114G1_200313114G1-13-1200.jpg&refer=http___lmg.jj20.webp"
          alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img style=" max-width:100%; height: 150px; width: 375px;"
          src="/src=http___www.sjht360.com_projectimg_2012209EO75V9W.jpg&refer=http___www.sjht360.webp" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img style=" max-width:100%; height: 150px; width: 375px;"
          src="/u=3178223302,2200161313&fm=253&fmt=auto&app=138&f=JPEG.webp" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- 分类标签 -->
    <van-tabs v-model="activetop" scrollspy style="margin-bottom: 50px">
      <van-tab title="精选" style="
           overflow: hidden;
           white-space: nowrap;
          overflow: auto;
           border-color: red;">
        <!-- 精选的模块 -->
        <div class="select" v-for="x in all" :key="x.lid" @click="goArticle(x.lid)"
          style="margin-left: 15px; width: 160px; height: 225px">
          <img style="border-radius: 8px; height: 225px" :src="x.pic" />
          <div class="data">
            <span>{{ x.views }}+</span>
            <span>在学</span>
          </div>
          <div class="introduction">{{ x.food }}</div>
        </div>
      </van-tab>
      <!-- 蛋糕分类 -->
      <van-tab title="蛋糕" style="
          overflow: hidden;
           white-space: nowrap;
          overflow: auto;
          border-color: red;
        ">
        <p style="margin-left: 15px; margin-top: 10px; font-weight: bolder">蛋糕分类</p>
        <!-- 选项卡1 -->
        <div class="select" v-for="x in articles10" :key="x.lid" @click="goArticle(x.lid)"
          style="width: 160px; height: 225px">
          <img style="border-radius: 8px; height: 225px" :src="x.pic" />
          <div class="data">
            <span>{{ x.views }}+</span>
            <span>在学</span>
          </div>
          <div class="introduction">{{ x.food }}</div>
        </div>
      </van-tab>
      <!-- 面包分类 -->
      <van-tab title="面包" style="
          overflow: hidden;
          white-space: nowrap;
          overflow: auto;
          border-color: red;
        ">
        <p style="margin-left: 15px; font-weight: bolder">面包分类</p>
        <!-- 选项卡1 -->
        <div class="select" v-for="x in articles20" :key="x.lid" @click="goArticle(x.lid)"
          style="margin-left: 15px; width: 160px; height: 225px">
          <img style="border-radius: 8px; height: 225px" :src="x.pic" />
          <div class="data">
            <span>{{ x.views }}+</span>
            <span>在学</span>
          </div>
          <div class="introduction">{{ x.food }}</div>
        </div>
      </van-tab>
      <!-- 饼干分类 -->
      <van-tab title="饼干" style="
          overflow: hidden;
          white-space: nowrap;
          overflow: auto;
           border-color: red;
        ">
        <p style="margin-left: 15px; font-weight: bolder">饼干分类</p>
        <!-- 选项卡1 -->
        <div class="select" v-for="x in articles30" :key="x.lid" @click="goArticle(x.lid)"
          style="margin-left: 15px; width: 160px; height: 225px">
          <img style="border-radius: 8px; height: 225px" :src="x.pic" />
          <div class="data">
            <span>{{ x.views }}+</span>
            <span>在学</span>
          </div>
          <div class="introduction">{{ x.food }}</div>
        </div>
      </van-tab>
      <!-- 月饼分类 -->
      <van-tab title="月饼" style="
          overflow: hidden;
          white-space: nowrap;
          overflow: auto;
          border-color: red; ">
        <p style="margin-left: 15px; font-weight: bolder">月饼分类</p>
        <!-- 选项卡1 -->
        <div class="select" v-for="x in articles40" :key="x.lid" @click="goArticle(x.lid)"
          style="margin-left: 15px; width: 160px; height: 225px">
          <img style="border-radius: 8px; height: 225px" :src="x.pic" />
          <div class="data">
            <span>{{ x.views }}+</span>
            <span>在学</span>
          </div>
          <div class="introduction">{{ x.food }}</div>
        </div>
      </van-tab>
    </van-tabs>
    <my-footer></my-footer>
  </div>
</template>

<script>
import { Toast } from "vant";
import Vue from "vue";
import { Tab, Tabs } from "vant";
import { Notify } from "vant";
import MyFooter from '@/components/MyFooter.vue';

Vue.use(Tab);
Vue.use(Tabs);
export default {
  components: { MyFooter },
  data() {
    return {
      value: "",
      activetop: "", //顶部选项卡
      active: "", //底部选项卡
      all: [], //精选
      articles10: [],
      articles20: [],
      articles30: [],
      articles40: [],
    };
  },
  mounted() {
    this.allData(), //精选
      //分类是10的文章
      this.loadCategory('cake', data => {
        this.articles10 = data;
      }),
      //分类是20的文章
      this.loadCategory('bread', data => {
        this.articles20 = data;
      }),
      //分类是30的文章
      this.loadCategory("cooky", data => {
        this.articles30 = data;
      }),
      //分类是40的文章
      this.loadCategory('snack', data => {
        this.articles40 = data;
      });
  },
  methods: {
    goCateGory() {
      this.$router.push({
        path: `/select`
      })
    },
    goArticle(lid) {
      // alert(1);
      this.$router.push({
        path: `/article/${lid}`
      })
    },
    allData() {
      // 发送请求获取精选部分的信息
      this.$axios.get("/show").then(res => {
        console.log(res.data, "精选全部的内容");
        this.all = res.data.data;
      });
    },
    onSearch(val) {
      Toast(val);
    },
    onChange(index) {
      Notify({ type: "primary", message: index });
    },
    // 封装方法
    loadCategory(list_id, callback) {
      this.$axios.get(`/list?category=${list_id}`).then(res => {
        let arts = res.data.data;
        callback(arts);
        console.log(arts, 'arts')
      });
    },
  },

  // 监听顶部导航点击的变化
  // watch: {
  //   active(to, from) {
  //     // to就是当前选中项类别的ID
  //     console.log(to, "to就是当前选中项")
  //     console.log(from, "from")
  //     // 发送请求，加载分类的列表
  //     this.$axios.get(`/category?list_id=${to+'0'}`)
  //       .then(res => {
  //         console.log(res); //获取到的数据
  //         this.data = res.data.data;
  //       })
  //       .catch(function (error) {
  //         //请求失败
  //         console.log("请求失败", error);
  //       });

  //   }
  // }
};
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
  display: none;
}

.van-tabs__wrap {
  position: fixed;
  z-index: 100;
  top: 44px;
}

.van-search {
  // padding: top='10';
  padding: 10px 10px 0px 10px;
}

.my-swipe .van-swipe-item {
  height: 150px;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.data {
  position: absolute;
  left: 0;
  bottom: 50px;
  font-size: 11px;
  margin: 0 10px;
  padding: 2px 4px;
  border-radius: 4px;
  overflow: hidden;
  color: #4a4945;
  background-color: #fff;
}

.select {
  display: flex;
  position: relative;
  margin-left: 10px;
  margin-top: 5px;
  width: 160px !important;
  height: 270px !important;
  display: inline-block;
  vertical-align: top;
  zoom: 1;
  box-sizing: border-box;
  overflow: hidden;
}

.introduction {
  color: #4a4945;
  font-weight: bold;
  font-size: 15px;
  line-height: 20.25px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  white-space: normal;
}
</style>
